什麼是 AJAX ?如何遠端撈取資料?


Posted by hoyi-23 on 2021-05-23

Ajax 是 Asynchronous JavaScript and XML 的縮寫。
Asynchronous - 非同步
JavaScript - 使用的程式語言
XML - Client 與 Server 交換資料用的資料與方法,近年由於 JSON 等格式的流行,使用 Ajax 處理的資料並不限於 XML。

AJAX 基本觀念

AJAX可以在不用重整網頁(更新網頁)下,去和資料庫、後端程式、PHP 等拉取資料或結果。

透過 XMLHttpRequest 物件跨瀏覽器撈資料

如何拉遠端的資料?

步驟一
使用瀏覽器撈對方伺服器要資料時,一定要新產生這個物件: XMLHttpRequest();
要透過這個物件,才能和其他伺服器要資料。

let xhr = new XMLHttpRequest();


上圖可以看到包裹中的項目,其中:
onload - 當資料取得完成後,立即觸發這個function
readyState - 撈取資料的狀態。

  • readyState: 0 - 已產生XMLHttpRequest,但尚未連結要取得的資料。
  • readyState: 1 - 用了open(),但尚未傳送send()。
  • readyState: 2 - 偵測到有使用send()。
  • readyState: 3 - 載入中。
  • readyState: 4 - 有撈到資料了,數據已經完全接收到。

responceText - 資料文字,若回傳的是JSON資料,使用JSON.parse()解析。

步驟二
撈取資料。

let xhr = new XMLHttpRequest();
xhr.open('格式','要讀取的網址',同步或非同步)
//格式: get讀取資料;post傳送資料到伺服器(例如:要確定帳設定有沒有重複,所以會帶資料傳送過去到資料庫確認、驗證)

這時候 readyState 是 1 。已經設定好格式,但是還每把需求傳送過去。

步驟三
傳送需求。

let xhr = new XMLHttpRequest();
xhr.open('格式','要讀取的網址',同步或非同步)
xhr.send(null/需求);
//null: 格式使用get表示我們要讀取資料,所以不能傳送任何東西過去。
//需求: 格式使用post時,表示我們要傳送東西過去資料庫驗證,所以需要將需求附上。

這時候responceText就會撈到資料囉!。


XMLHttpRequest.withCredentials

XMLHttpRequest.withCredentials 屬性是一個 Boolean 型別,它指出無論是否使用 Access-Control 標頭在跨站的要求上,都應該使用像 Cookies、Authorization 標頭或 TLS 用戶端憑證來進行驗證。在相同來源的要求設定 withCredentials 沒有任何效果。

let xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/', true);
xhr.withCredentials = true;
xhr.send(null);

#ajax #遠端資料 #credentials







Related Posts

What Type of Laser Engraving Machine Should be Used for Stainless Steel Engraving?

What Type of Laser Engraving Machine Should be Used for Stainless Steel Engraving?

Leetcode 刷題 pattern - Fast & Slow Pointer

Leetcode 刷題 pattern - Fast & Slow Pointer

BTC White Paper解讀

BTC White Paper解讀


Comments